<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.home {
		width: 100%;
		background-color: #F6F6F6;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: relative;
		flex:1;
		overflow: hidden;
		$radiusSize: 100%;
		display: flex;
		flex-direction: column;
		.top_bg{
			width: 140%;
			height: 14rem;
			border-bottom-left-radius: $radiusSize;
			border-bottom-right-radius: $radiusSize;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: $mainColor;
			z-index: 1;
		}
		.wp{
			flex: 1;
				width: 100%;
				z-index: 99;
				display: flex;
				flex-direction: column;
			.user {
				padding: 2rem 1.6rem 0 1.6rem;
				width: 100%;
				box-sizing: border-box;
				height: 5.2rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info {
					display: flex;
					align-items: center;
					.infonr{
						display: flex;
						flex-direction: column;
						margin-left: 1rem;
						font-size: 1.3rem;
						color: white;
						line-height: 1.8rem;
					}
				}
			}
			.menuContainer {
				box-sizing: border-box;
				padding: 2rem 1.6rem;
				background-color: white;
				margin: 2rem 1.6rem 0 1.6rem;
				box-sizing: border-box;
				border-radius: 0.8rem;
				.item {
					// width: 10.6rem;
					display: flex;
					align-items: center;
					background-color: white;
					justify-content: space-between;
					box-sizing: border-box;
					border-radius: 0.6rem;
					.items {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 1.4rem;
						&:nth-child(1) {
							padding-left: 4.1rem;
						}
						&:nth-child(2) {
							padding-right: 4.1rem;
						}
						img {
							margin-bottom: 1.4rem;
							width: 4rem;
							height: 4rem;
						}
					}
				}
			}
			.infoContainer {
				// padding: 0 1.6rem;
				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 1.8rem;
					padding: 0.5rem 0 0 1.6rem;
					.daiban {
						font-weight: 600;
					}
					.van-cell {
						font-size: 1.7rem;
						background-color: #F6F6F6;
						.van-icon-arrow::before {
							transform: rotate(90deg);
							font-size: 1.8rem;
							margin-left: .8rem;
							margin-top: .2rem;
						}
					}
				}
				.main {
					margin-top: 0.6rem;
					margin-right: 0.6rem;
					.van-steps {
						background: #F6F6F6;
						.stepItem {
							width: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 1.2rem;
							background: #fff;
							box-sizing: border-box;
							border-radius: 1.2rem;
							color: #969799;
							.stepHeader {
								box-sizing: border-box;
								font-size: 1.5rem;
								display: flex;
								justify-content: space-between;
								border-bottom: 1px solid #F5F5F5;
								padding-bottom: 1.2rem;
								.h3Font {
									color: #3D3672;
								}
								.taday {
									font-size: 1.3rem;
								}
							}
							.stepFooter {
								box-sizing: border-box;
								padding: 1.6rem 0 0 0;
								.desc{
									
								}
							}
						}
					}
				}
			}
		}
	}
	.van-step__title--active .h3Font, 
	.van-step__title--active .stepHeader, 
	.van-step__title--active .stepFooter{
		color: #FC611E !important;
	}

</style>
<template>
	<div class="home">
		<div class="top_bg"></div>
		<van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
		<div class="wp">
			<div class="user">
				<div class="info">
					<van-image
						class="userImg"
						round
						width="3.6rem"
						height="3.6rem"
						:src="userInfo.avatar"
					/>
					<div class="infonr">
						<span>{{userInfo.nickname}}</span>
						<span>{{userInfo.type==1?'分校区管理员':'总管理员'}}</span>
					</div>
				</div>
				<!-- <van-icon name="chat-o" :dot="dot" class="icon" size="2.4rem" color="white"/> -->
			</div>
			<div class="menuContainer">
				<div class="item">
					<div class="items" @click="toView('/courseManage')">
						<img src="../../assets/img/user/book.svg">
						<span>课程管理</span>
					</div>
					<div class="items"  @click="toView(`/applyManage?tag='apply'`)">
						<img src="../../assets/img/user/user.svg">
						<span>报名管理</span>
					</div>
				</div>
			</div>
			<div class="infoContainer">
				<div class="container">
					<div class="header">
							<div class="daiban">
								<span>我的待办</span>
							</div>
							<div class="action">
								<van-cell is-link title="时间" @click="show = true" />
							</div>
					</div>
					<div class="main">
						<van-steps direction="vertical" :active="0" active-color="#FC611E" :active-icon="active" :inactive-icon="inactive">
							<van-step v-for="(item, index) in infoList" :key="index">
								<div class="stepItem"  @click="toDetailView(item)">
									<div class="stepHeader">
										<h3 class="h3Font">{{item.taskname}}</h3>
										<p class="taday">{{$utils.parseTimeMD(item.createtime)}}</p>
									</div>
									<div class="stepFooter">
										<div class="desc van-ellipsis" v-html="item.content"></div>
									</div>
								</div>
							</van-step>
						</van-steps>
					</div>
				</div>

			</div>
			<div class="tabbar-height"></div>
		</div>
		
	</div>
</template>

<script>
import {Dialog} from 'vant'
import {myMixins} from "@/assets/js/mixins.js"
export default {
	mixins: [myMixins],
	name: "home",
	components: {
	},
	data() {
		return {
			dot: true,
			show: false,
			actions: [{ name: '全部',id: '' }, { name: '本星期',id: 7 }, { name: '本月度',id: 30 }, { name: '本季度',id: 90 }, { name: '本年度',id: 365} ],
			active: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/af80e9c4-5cba-467f-bd56-078906c4c94a.svg',
			inactive: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/aa629246-a1d4-4e0e-892d-be645bacf2f9.svg',
			infoList: [
			],
			userInfo:'',
			type:''
		}
	},
	created() {
		const userInfo = JSON.parse(localStorage.getItem('userInfo'))
		console.log('userInfo',userInfo)
		this.userInfo = userInfo
	},
	mounted() {
		this.TaskPage()
	},
	methods: {
		toDetailView(item) {
			this.$store.commit('setTaskItem',item)
			this.$router.push('/taskDetail')
		},
		onSelect(item) {
		  // 默认情况下点击选项时不会自动收起
		  // 可以通过 close-on-click-action 属性开启自动收起
		  this.show = false;
		  this.type = item.id
		  console.log(item.name,this.type)
		  this.TaskPage()
		},
		TaskPage() {
			let params = {
				// avatar: this.form.avatar,
				// nickname: this.form.nickname,
				campus_id: this.userInfo.campus_id,
				status: 1,
				type: this.type
			}
			this.$request.TaskPage(params).then(res=>{
				// Dialog({ message: '提示' });
				if(res.ret==200){
					this.infoList = res.data.data
				}
				// else{
				// 	Dialog({ title:'系统提示', message: res.msg });
				// }
			})
		}
	}
};
</script>
